<template>
    <div :class="chatClass">
        <MdPreview :editorId="id" :modelValue="text" :codeTheme="codeTheme" :theme="theme"
            :showCodeRowNumber="showCodeRowNumber" :previewTheme="previewTheme" :noKatex="noKatex"
            @onHtmlChanged="handleHtmlChanged" />

        <MdCatalog :editorId="id" :scrollElement="scrollElement" />
    </div>
</template>
  
<script setup>
import { ref, defineProps } from 'vue';
// import hljs from 'highlight.js';
import { MdPreview, MdCatalog, config } from 'md-editor-v3';
// preview.css相比style.css少了编辑器那部分样式
import 'md-editor-v3/lib/preview.css';
const emit = defineEmits(['handleHtmlChanged'])
const handleHtmlChanged = (html) => {
    emit('handleHtmlChanged', html)
}
    
const exprops = defineProps({
    text: {
        type: String,
        default: ''
    },
    theme: {
        type: String,
        default: 'light'//'light' | 'dark'
    },
    // 是否显示代码行号
    showCodeRowNumber: {
        type: Boolean,
        default: true
    },
    // 预览主题
    previewTheme: {
        type: String,
        default: 'github'//'default' | 'github' | 'vuepress' | 'mk-cute' | 'smart-blue' | 'cyanosis'
    },
    // 是否禁用katex
    noKatex: {
        type: Boolean,
        default: false
    },
    // 代码主题
    codeTheme: {
        type: String,
        default: 'github'//'atom'|'a11y'|'github'|'gradient'|'kimbie'|'paraiso'|'qtcreator'|'stackoverflow'
    },
    chatClass: {
        type: String,
        default: ''
    }
});
const id = 'preview-only';
const scrollElement = document.documentElement;
</script>

<style scoped lang="less">
.md-editor {
    border-radius: 6px;
}

/deep/.md-editor-preview {
    font-size: 14px !important;
}

/deep/ .github-theme p {
    margin: 0;
}
</style>